<!--
 * @Description: 
 * @Author: ye_xf
 * @Date: 2022-07-28 15:18:24
 * @LastEditTime: 2022-08-05 14:36:56
 * @LastEditors: ye_xf
 * @Reference: 
-->

<template>
  <div class="permission-box">
    <fm-nav-bar title="权限demo" left-arrow @click-left="$router.go(-1)">
    </fm-nav-bar>
    <div class="list-box">
      <div v-for="item in dataList" :key="item.id" class="item">
        <fm-cell-group inset>
          <fm-cell title="名称" :value="item.name" />
          <fm-cell title="负责人" :value="item.managerFullname" />
          <fm-cell
            title="创建时间"
            :value="item.createDate"
            class="create-date"
          />
        </fm-cell-group>
      </div>
    </div>
    <!-- 增加按钮 -->
    <div v-permission="['permissionTest:add']" class="btn-box" @click="add">
      <i class="fm-icon fm-icon-plus"></i>
    </div>
  </div>
</template>

<script>
import { Toast } from 'fawkes-mobile-lib'
import { getCommonFlowList } from './api'

export default {
  name: 'permissionTest',
  data() {
    return {
      dataList: [],
    }
  },
  methods: {
    @permission('permissionTest:query')
    getDataList() {
      const data = {
        page: 1,
        size: 20,
        departmentName: '',
        managerFullname: '',
        name: '',
      }

      getCommonFlowList(data)
        .then((res) => {
          if (!res.status) {
            return
          }

          this.dataList = res.data.list
        })
        .catch(() => {})
        .finally(() => {})
    },
    add() {
      Toast('v-permission 指令生效')
    },
  },
  created() {
    this.getDataList()
  },
}
</script>

<style lang="less" scoped>
.permission-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f2f3f4;

  .list-box {
    flex: 1;
    overflow-y: auto;

    //隐藏滚动条
    scrollbar-width: none; //firefox
    -ms-overflow-style: none; //IE 10+

    &::-webkit-scrollbar {
      display: none; //Chrome | Safari
    }

    .item {
      margin: 32px 0;

      .create-date {
        .fm-cell__value {
          font-size: 30px;
        }
      }
    }
  }

  .btn-box {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    color: #fff;
    background-color: #027aff;
    border-radius: 50%;
    z-index: 1000;
  }
}
</style>